<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { getRtmp, closeRtmp } from '@/assets/api/device'
import { useRoute, useRouter } from 'vue-router'
import 'videojs-flash'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import config from '@/assets/js/config'
const route = useRoute()
const router = useRouter()
const videoNumber = ref(route.query.number)
function updateVideo() {
    const params = {
        number: videoNumber.value,
        ip_addr: config.IPUrl,
    }
    getRtmp(params).then((res) => {
        play(res.data)
    })
}
function play(url) {
    console.log(player)
    if (player) {
        player.src({
            src: url,
            type: 'rtmp',
        })
    } else {
        const playerOptions = reactive({
            autoplay: true, // 是否自动播放
            fullscreenToggle: false, // 是否全屏
            muted: true, // 是否静音
            controls: false,
            fluid: false, // 宽高自适应
            techOrder: ['html5', 'flash'],
            // techOrder: ['flash', 'html5'],
            notSupportMessage: '无法播放',
            id: ref('v' + +new Date()),
            sources: [
                {
                    src: url,
                    type: 'rtmp',
                },
            ],
        })
        initPlayer(playerOptions)
    }
}
function initPlayer(options) {
    player = videojs(videoRef.value, options, () => {
        videojs.log('播放器已经准备好了!')
        player.on('error', (e) => {
            console.log('error', e)
            loading.value = true
            loadingText.value = '加载失败'
        })
        player.on('loadstart', (e) => {
            console.log('loadstart', e)
            loading.value = true
            loadingText.value = '开始加载'
        })
        player.on('progress', () => {
            console.log('progress')
            loading.value = false
            loadingText.value = '加载中'
        })
        player.on('timeupdate', () => {
            // console.log('timeupdate')
        })
        player.on('loadedmetadata', () => {
            console.log('loadedmetadata')
        })
        player.on('playing', () => {
            console.log('playing')
        })
        player.on('pause', () => {
            loading.value = false
            console.log('pause')
        })
        player.on('play', () => {
            console.log('play')
            loading.value = false
        })
        player.on('waiting', () => {
            console.log('waiting')
            // loading.value = true
            // loadingText.value = '等待响应'
        })
        player.on('stalled', () => {
            console.log('网速异常')
        })
    })
}
const videoRef = ref()
let player = null
const loading = ref(false)
const loadingText = ref('')
onMounted(() => {
    updateVideo()
})
onUnmounted(() => {
    closeVideo(videoNumber.value)
    if (player) {
        player.dispose()
    }
})

function closeVideo(number) {
    closeRtmp(number).then(() => {
        console.log('关闭成功', number)
    })
}
function internalBack() {
    router.go(-1)
}
defineExpose({ updateVideo })

// video js
</script>
<template>
    <div class="video">
        <el-button class="video-back" @click="internalBack">关闭</el-button>
        <video
            ref="videoRef"
            class="video-js vjs-default-skin vjs-big-play-centered"
            style="width: 100%; height: 100%"
            preload="auto"
            crossOrigin
            data-setup='{ "html5" : { "nativeTextTracks" : false } }'
        ></video>
    </div>
    <!-- <h4 class="video-name">{{ videoData.name }}</h4> -->
</template>
<style lang="scss" scoped>
.video {
    position: relative;
    width: 100%;
    height: 100%;
}
.video-name {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}
.video-status {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
}
.video-back {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
</style>
